<template>
  <div>
    <p>当前位置：前摄性评估模块--装配进度评估</p>
    <div>
      <h2>机型：AC10、AC20</h2>
      <button @click="showRiskTable = !showRiskTable" style="margin: 10px 20px;">
        {{ showRiskTable ? '隐藏风险评估' : '显示风险评估' }}
      </button>
      <div v-if="showRiskTable">
        <button @click="previousBatch" style="margin: 10px 20px;">←</button>
        <span>{{ batchNames[batchIndex] }}</span>
        <button @click="nextBatch" style="margin: 10px 20px;">→</button>
      </div>
    </div>
    <div v-if="!showRiskTable">
      <GanttChartAssessment ref="ganttChart" :selectedStation="selectedStation" :batchIndex="batchIndex" />
    </div>
    <div v-if="showRiskTable" style="margin-top: 20px;">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>站位名称</th>
            <th>站位编号</th>
            <th>当前T级</th>
            <th>当前AO</th>
            <th>机型</th>
            <th>当前作业批次</th>
            <th>站位可容纳最大人数</th>
            <th>交付节点</th>
            <th>风险等级</th>
            <th>进度表</th>
            <th>风险原因</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in currentBatchData" :key="index" :class="getRiskClass(item.Prisk)">
            <td>{{ index + 1 }}</td>
            <td>{{ item.Pname }}</td>
            <td>{{ item.Pnum }}</td>
            <td>{{ item.Pt }}</td>
            <td>{{ item.PAO }}</td>
            <td>{{ item.Ptype }}</td>
            <td>{{ batchIndex + 1 }}</td>
            <td>{{ item.Pmaxworks }}</td>
            <td>{{ item.Pnodes }}</td>
            <td>{{ item.Prisk }}</td>
            <td><a href="#">{{ item.schedule }}</a></td>
            <td>{{ item.riskReason }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import GanttChartAssessment from './GanttChart_assessment.vue';

export default {
  name: 'PreAssessmentSchedule',
  components: {
    GanttChartAssessment,
  },
  data() {
    return {
      showRiskTable: false,
      batchIndex: 0,
      selectedStation: 'Station1',
      batchNames: ['当前批次', '下一个批次', '下两个批次'],
      baseBatchNumber: 1,
      batches: [
        { Pname: '前机身框架', Pnum: '26A', Pt: 'T1', PAO: 'A260101', Ptype: 'AC-20', Pmaxworks: '4', Pnodes: '2023.0102', Prisk: '无风险', schedule: '查看', riskReason: '', Pbatch: 1 },
        { Pname: '中机身平台', Pnum: '26B', Pt: 'T2', PAO: 'B260201;B260203', Ptype: 'AC-10', Pmaxworks: '4', Pnodes: '2023.0102', Prisk: '一级风险', schedule: '查看', riskReason: '资源不足', Pbatch: 1 },
        { Pname: '中机身中段平台', Pnum: '26C', Pt: 'T1', PAO: 'C260103', Ptype: 'AC-20', Pmaxworks: '4', Pnodes: '2023.0102', Prisk: '无风险', schedule: '查看', riskReason: '', Pbatch: 1 },
        { Pname: '前机身框架', Pnum: '26D', Pt: 'T1', PAO: 'D260102;D260101;D260103', Ptype: 'AC-20', Pmaxworks: '6', Pnodes: '2023.0102', Prisk: '一级风险', schedule: '查看', riskReason: '人手不足', Pbatch: 1 },
        { Pname: '前机身下构件', Pnum: '25A', Pt: 'T3', PAO: 'A250301', Ptype: 'AC-20', Pmaxworks: '6', Pnodes: '2023.0102', Prisk: '二级风险', schedule: '查看', riskReason: '设备故障', Pbatch: 2 },
        { Pname: '中机身前段', Pnum: '25B', Pt: 'T4', PAO: 'B250405', Ptype: 'AC-20', Pmaxworks: '8', Pnodes: '2023.0102', Prisk: '三级风险', schedule: '查看', riskReason: '材料短缺', Pbatch: 3 },
        { Pname: '中机身中段平台', Pnum: '25C', Pt: 'T5', PAO: 'C250502;C250503;C250504', Ptype: 'AC-20', Pmaxworks: '8', Pnodes: '2023.0102', Prisk: '无风险', schedule: '查看', riskReason: '', Pbatch: 1 },
        { Pname: '前机身下构件', Pnum: '25D', Pt: 'T6', PAO: 'D250601', Ptype: 'AC-20', Pmaxworks: '10', Pnodes: '2023.0102', Prisk: '无风险', schedule: '查看', riskReason: '', Pbatch: 2 },
        { Pname: '中机身前段', Pnum: '25E', Pt: 'T4', PAO: 'E250405', Ptype: 'AC-20', Pmaxworks: '6', Pnodes: '2023.0102', Prisk: '无风险', schedule: '查看', riskReason: '', Pbatch: 3 },
        { Pname: '中机身中段平台', Pnum: '25F', Pt: 'T7', PAO: 'F250703', Ptype: 'AC-10', Pmaxworks: '6', Pnodes: '2023.0102', Prisk: '无风险', schedule: '查看', riskReason: '', Pbatch: 1 },
        { Pname: '前机身下构件', Pnum: '25G', Pt: 'T5', PAO: 'G250501', Ptype: 'AC-20', Pmaxworks: '4', Pnodes: '2023.0102', Prisk: '无风险', schedule: '查看', riskReason: '', Pbatch: 2 },
        { Pname: '中机身前段', Pnum: '24B', Pt: 'T2', PAO: 'B2401206', Ptype: 'AC-20', Pmaxworks: '4', Pnodes: '2023.0102', Prisk: '无风险', schedule: '查看', riskReason: '', Pbatch: 3 },
      ],
    };
  },
  computed: {
    currentBatchData() {
      // 返回当前批次的数据
      return this.batches.map(item => {
        return { ...item, Pbatch: this.batchIndex + 1 };
      });
    }
  },
  methods: {
    previousBatch() {
      if (this.batchIndex > 0) {
        this.batchIndex--;
        this.updateChart();
      }
    },
    nextBatch() {
      if (this.batchIndex < this.batchNames.length - 1) {
        this.batchIndex++;
        this.updateChart();
      }
    },
    updateChart() {
      if (this.$refs.ganttChart) {
        this.$refs.ganttChart.updateChart();
      }
    },
    getRiskClass(riskLevel) {
      if (riskLevel === '一级风险') {
        return 'risk-level-one';
      } else if (riskLevel === '二级风险') {
        return 'risk-level-two';
      } else if (riskLevel === '三级风险') {
        return 'risk-level-three';
      } else {
        return '';
      }
    }
  }
};
</script>





<style>
.risk-level-one {
  background-color: lightcoral;
}
.risk-level-two {
  background-color: lightyellow;
}
.risk-level-three {
  background-color: lightpink;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
th {
  background-color:  #4CAF50;
  color: aliceblue;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}


</style>